<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onClose" @onConfirm="commit">
        <template v-slot:content>
            <el-form :model="addModel" ref="addFormRef" :rules="rules" label-width="80px" :inline="false"
                size="default">

                <el-form-item prop="name" label="姓名">
                    <el-input v-model="addModel.name"></el-input>
                </el-form-item>

                <el-form-item prop="gender" label="性别">
                    <el-radio-group v-model="addModel.gender">
                        <el-radio :value="'0'">男</el-radio>
                        <el-radio :value="'1'">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item prop="username" label="用户名">
                    <el-input v-model="addModel.username"></el-input>
                </el-form-item>

                <el-form-item prop="password" label="密码">
                    <el-input v-model="addModel.password"></el-input>
                </el-form-item>

                <el-form-item prop="phone" label="电话">
                    <el-input v-model="addModel.phone"></el-input>
                </el-form-item>
            </el-form>

        </template>
    </SysDialog>
</template>

<script setup lang="ts">
import { addUserApi,editUserApi } from '@/api/user/index'
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/tools/useDialog";
import { nextTick, reactive, ref } from "vue";
import { UserModel } from "@/api/user/UserModel";
import { ElMessage, FormInstance } from "element-plus";
import { EditType,Title } from '@/type/BaseType';
//表单rdf属性
const addFormRef = ref<FormInstance>()
//弹框属性
const { dialog, onClose } = useDialog()
//显示弹框
const show = (type:string,row?:UserModel) => {
    dialog.title = '新增'
    //设置弹框的标题
    dialog.height = 215;
    dialog.visible = true;
    //如果传递了row,说明是编辑，就要返回数据
    if(row && type == EditType.EDIT){
        dialog.title = '编辑'
        nextTick(()=>{
            Object.assign(addModel,row)
        })
    }
    //每次打开时清空表单
    addFormRef.value?.resetFields()
    //设置本次操作是新增还是编辑
    addModel.type = type;
}
//将方法显露出去给父组件调用
defineExpose({
    show
})
//表单绑定的对象
const addModel = reactive<UserModel>({
    userId: '',
    username: '',
    password: '',
    phone: '',
    gender: '0',
    name: '',
    type:''
});
//表单验证规则
//先在表单的各个label上加上prop属性
const rules = reactive({
    name: [{
        required: true,
        message: "请输入姓名",
        trigger: "blur"
    },],
    gender: [{
        required: true,
        message: "请输入性别",
        trigger: "blur"
    },],
    username: [{
        required: true,
        message: "请输入用户名",
        trigger: "blur"
    },],
    password: [{
        required: true,
        message: "请输入密码",
        trigger: "blur"
    },],
    phone: [{
        required: true,
        message: "请输入电话",
        trigger: "blur"
    },]
});
//注册事件
const emists = defineEmits(['onFresh'])
//表单提交
const commit = () => {
    addFormRef.value?.validate(async (valid) => {
        if (valid) {
            let result = null;
            if(addModel.type == EditType.ADD){
                result = await addUserApi(addModel)
            }else{
                result = await editUserApi(addModel)
            }
            if (result && result.code==200) {
                ElMessage.success(result.msg)
                //刷新列表
                emists('onFresh')
                onClose();
            }
        }
    });
}
</script>

<style scoped></style>